Authoring animations seen in mobile and web application is unintuitive for visual designers who have not specialized in animation. Designing animations triggered by interactions like dragging and swiping are complex to author and require designers to understand concepts that are very developer oriented. In more detail, to perform animation across one or more canvases, the same objects in each canvas need to be explicitly associated with one another. In order to achieve this, objects from one scene must be matched with the same objects in another scene in an automated fashion. For example, an artboard may comprise any number of child objects such as shapes or images. The same objects may appear in a second artboard in which case an animation algorithm animates the matching objects from their respective positions in the first artboard to their positions in the second artboard. Typically objects in an artboard are associated with various attributes such as a name, type, etc. Matching objects from one artboard to another may be achieved by finding objects in two artboards sharing the same name and type. However, performing this matching in an automated fashion can be problematic when, for example, duplicate object names exist across artboards.
Once an animation has been designed by developing multiple artboards, designers typically would like to preview the animation. However, known techniques for designing an animation typically require designers/animators to input a drag direction (like left, top, right, bottom) in addition to a gesture, which is inconvenient. Further, such known techniques are generally limited in the types of animations they can generate. Other known techniques employ simplistic auto-animation techniques such as the concept of “Magic Move” that animates objects from one slide to the other. However, complex interactions like drag do not exist with these known methods.
Other tools employ a “timeline” and a single canvas in which artwork is shown. The user is required to specify a number of choices in a timeline UI to animate a property. Requiring the user to select and specify a large number of properties tends to be inconvenient and often impractical.